/* eslint-disable */
/**
 * Created by GYL on 2018/8/24
 */
import React, { Component } from 'react';
import styles from '../File.less';
import { Collapse, Icon, Select, Input, Tooltip, Form, Row, Col, TreeSelect, Tag, message, Tree } from 'antd';
import Container from "../../../components/common/Container";
import PublicService from "../../../services/PublicService";
import config from '../../../config';
import Util from '../../../utils/Util';
import request from '../../../utils/request';
import MyTable from "../../../components/common/MyTable";
import MyModal from '../../../components/common/MyModal';
import moment from 'moment';
import FileViewer from 'react-file-viewer';
import Zmage from 'react-zmage'
const { Panel } = Collapse;
const { Option } = Select;
const { TextArea } = Input;
const FormItem = Form.Item;
const { SHOW_CHILD } = TreeSelect;
const { TreeNode } = Tree;

class File extends Component {






  state = {
    pathListImage: '',
    pathList: [],
    expandedKeys: [],
    autoExpandParent: true,
    checkedKeys: [],
    selectedKeys: [],
    treeData: []
  }


  componentDidMount() {

    // this.getProjectFileTree()

  }
  //获取文件树
  getProjectFileTree = () => {
    request({
      url: '/pm-web/projectmanage/progress/getProjectFileTree',
      method: 'POST',
      data: { projectId: this.props.id }
    }).then(data => {
      if (data.rc === 0) {
        this.setState({
          treeData: data.ret.treeList
        })
      }
    })

  }


  //获取预览文件
  filePreview = (id) => {

    request({
      url: '/pm-web/projectmanage/fileupload/filePreview',
      method: 'POST',
      data: { id: id[0] }
    }).then(data => {
      // console.log(data)
      if (data.rc === 0) {
        this.setState({
          pathList: data.ret.pathList,
          pathListImage: data.ret.pathList[0].src
        })
      }else{
        message.warning(data.err)
      }

    })

  }
  onExpand = expandedKeys => {
    // console.log('onExpand', expandedKeys);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };

  onCheck = checkedKeys => {
    // console.log('onCheck', checkedKeys);
    this.setState({ checkedKeys });



  };



  onSelect = (selectedKeys, info) => {
    // console.log('onSelect', info, selectedKeys);
    // console.log(Number(selectedKeys))
    this.setState({ selectedKeys });
    if (Number(selectedKeys) > 0) {
      this.filePreview(selectedKeys)
    }
  };



  onExpand2 = expandedKeys2 => {
    // console.log('onExpand', expandedKeys2);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    this.setState({
      expandedKeys2,
      autoExpandParent2: false,
    });
  };

  onCheck2 = checkedKeys2 => {
    // console.log('onCheck', checkedKeys2);
    this.setState({ checkedKeys2 });
  };

  onSelect2 = (selectedKeys, info) => {
    // console.log('onSelect', info);
    this.setState({ selectedKeys2: selectedKeys });
  };

  renderTreeNodes = data =>
    data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} selectable={item.selectable}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} icon={<Icon type={item.icon} theme={item.theme} twoToneColor={item.twoToneColor} selectable={item.selectable} onClick={this.onIcon.bind(this, item)} />} />;
    });

  onIcon = (v) => {
    window.location.href = `/pm-web/projectmanage/fileupload/downloadFile?id=${v.id}`
  }




  render() {
    let t = this
    let width = document.body.clientWidth;
    const height = document.body.clientHeight;
    let containerHeight = '80vh';
    let tableHeight = 310;
    if (width > 1367) {
      tableHeight = 380;
      containerHeight = '83vh';
    }


    const { crList } = this.state
    return (
      <div style={{ padding: 10, height: containerHeight, display: 'flex' }}>
        <div className={styles.warpBox}>
          <div style={{ flex: 1, backgroundColor: '#f6f6f18a', overflow: 'auto', display: 'flex' }}>
            <div style={{ flex: 2, display: 'flex', alignItems: 'center', flexDirection: 'column', overflow: 'auto', backgroundColor: '#fff' }}>
              <h2 style={{ fontSize: 14, fontWeight: 700, textAlign: 'center', borderBottom: '1px solid skyblue', width: '100%' }}>文件列表</h2>
              <div style={{ flex: 1, overflow: 'auto', maxHeight: '80vh', width: '100%' }}>
                <Tree
                  showIcon

                  onExpand={this.onExpand}
                  expandedKeys={this.state.expandedKeys}
                  autoExpandParent={this.state.autoExpandParent}
                  onCheck={this.onCheck}
                  checkedKeys={this.state.checkedKeys}
                  onSelect={this.onSelect}
                  selectedKeys={this.state.selectedKeys}
                // checkStrictly={true}
                >
                  {this.renderTreeNodes(this.props.FiletreeData)}
                </Tree>
              </div>

            </div>
            <div style={{ width: 50, display: 'flex', alignItems: 'center', flexDirection: 'column', backgroundColor: '#f7f5f5', justifyContent: 'center' }}>

            </div>
            <div style={{ flex: 6, display: 'flex', alignItems: 'center', flexDirection: 'column', overflow: 'auto', backgroundColor: '#fff' }} className={styles.rightBox}>

              <Zmage
                // src="http://zmage.caldis.me/imgSet/childsDream/demo.jpg"
                // alt="放大图片并并滑动预览"
                src={this.state.pathListImage}
                set={this.state.pathList}
              />
            </div>

          </div>
        </div>
      </div>
    );


  }
  onError(e) {
    logger.logError(e, 'error in file-viewer');
  }

}
export default File;

